<template>
  <div class="home">

    <el-container style="height: 100vh">

      <el-aside :width="widthMenu" style="background-color: rgb(238, 241, 246)">

        <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"
                 background-color="#416082"
                 text-color="white"
                 active-text-color="#40b883">
          <div style="height: 60px;line-height: 60px"><img alt="Vue logo" src="@/assets/logo.png" width="34px" style="position: relative;top: 14px"> <font v-if="!isCollapse" style="color: white">后台管理系统</font></div>

          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">导航一</span>
            </template>
            <el-menu-item-group>
              <span slot="title">分组一</span>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <span slot="title">选项4</span>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px; background-color: #b3c0d138">
          <div style="height: 60px;line-height: 60px;text-align: center;float: left">
            <h1 :class="collapseCls" @click="collapse"></h1>
          </div>

          <el-breadcrumb separator="/" style="height: 60px;line-height: 60px;text-align: center;float: left;margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>

          <span>王小虎</span>
          <el-dropdown>
            <i class="el-icon-arrow-down" style="margin-right: 15px;margin-left: 5px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>退&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

        <el-main>
        <!--    条件搜索      -->
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="float: left">
            <el-form-item label="审批人">
              <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="formInline.region" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>

          <!--     按钮     -->
          <div style="float: right">
            <el-button type="success" @click="handleEdit(1, '增加')" plain>增加<li class="el-icon-plus"></li></el-button>
            <el-button type="danger" plain>删除<li class="el-icon-delete"></li></el-button>
            <el-button type="info" plain>上传<li class="el-icon-upload2"></li></el-button>
            <el-button type="warning" plain>下载<li class="el-icon-download"></li></el-button>

          </div>

<!--          <el-row>

          </el-row>-->
          <!--    内容     -->
          <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="日期"
                width="120">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>

        <el-footer>

          <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>
          </div>
        </el-footer>
      </el-container>
    </el-container>

  </div>
</template>

<script>


export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      isCollapse: false,
      currentPage1: 5,
      sideWidth: 200,
      collapseCls: "el-icon-s-unfold",
      widthMenu: '200px',
      formInline: {
        user: '',
        region: ''
      }
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
      // 编程式路由来进行组件跳转
      this.$router.push({ path: '/saveOrUpdate/'+row, replace: true })
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleOpen(key, keyPath) {
      console.log("打开")
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    collapse(){

      this.isCollapse = !this.isCollapse
      if (this.isCollapse){
        this.collapseCls = "el-icon-s-unfold"
        this.widthMenu = '64px'
      }else {
        this.collapseCls = "el-icon-s-fold"
        this.widthMenu = '200px'
      }
    },
    onSubmit() {
      console.log('submit!');
    },
    saveOrUpdate(){
      this.$router.push({path:'/savaOrUpdate',replace:true})
    }
  }
}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}




.el-aside {
  color: #333;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100vh;
  background-color: #42b983;
}
.el-menu {
  background-color: aquamarine;
}
.el-menu--collapse {
  height: 100vh;

  background: cadetblue;
}
</style>
